import React from 'react';
import styles from './index.less';
import { Row, Col } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import image from '@/assets/image.jpg';



export default class extends React.Component {


  render() {

    const detail = [{
      title: '时间编号：',
      cont: '10987892',
      title2: '上报时间：',
      cont2: '2021年-11-08'
    }, {
      title: '事件状态：',
      cont: '',
      title2: '上报来源：',
      cont2: '物联感应'
    }, {
      title: '事件类型：',
      cont: '城市管理',
      title2: '上报部门：',
      cont2: 'xxxx社区第一网格'
    }, {
      title: '事发时间：',
      cont: '2021-11-08 19：18',
      title2: '事发地点：',
      cont2: '杭州市萧山区蜀山街道戚家池社区'
    },]

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <div className={styles.title}>事件详情</div>
          <div className={styles.close}> <CloseOutlined /></div>
        </div>
        <div className={styles.content}>
          {
            detail.map((item, i) => {
              return (<Row>
                <Col span={12}>
                  <div className={styles.item}>
                    <span className={styles.itemTitle}>{item.title}</span>
                    <span className={styles.itemCont}>{item.cont}</span>
                  </div>
                </Col>
                <Col span={12}>
                  <div className={styles.item}>
                    <span className={styles.itemTitle}>{item.title2}</span>
                    <span className={styles.itemCont}>{item.cont2}</span>
                  </div>
                </Col>
              </Row>)

            })
          }
          <Row>
            <Col span={12}>
              <div className={styles.item}>
                <span className={styles.itemTitle}>事件描述：</span>
                <span className={styles.itemCont}>11月18日发现市中心府东门发生火灾</span>
              </div>
            </Col>
            <Col span={12}>
              <div className={styles.main} >

                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span className={styles.item1}>持续时间：</span>
                <span className={styles.item2}>0：45：57</span>

              </div>

            </Col>
          </Row>
          <Row>
            <div className={styles.item}>
              <Col className={styles.itemTitle}>现场照片</Col>
            </div>

          </Row>
          <Row>
            <div className={styles.item}>
              <div>
                <img src={image} width="300"/>
              </div>
            </div>
          </Row>
        </div>
      </div>
    );
  }
}
